import ImageBlock from "@/entities/imageBlock/ui/ImageBlock"
import InteractiveModelBlock from "@/entities/interactiveModelBlock/ui/InteractiveModelBlock"
import { useGetLessonById } from "@/entities/lesson/model/useGetLessonById"
import TestBlock from "@/entities/testBlock/ui/TestBlock"
import CreateTestButton from "@/features/create-test/ui/CreateTestButton"
import CreateImageBlockButton from "@/features/createImageBlock/ui/CreateImageBlockButton"
import TextEditor from "@/features/textEditor/ui/TextEditor"
import { UiSpinner } from "@/shared/Uikit/UiSpinner"
import { EditorState, RawDraftContentState, convertToRaw } from "draft-js"
import CreateInteractiveModelBlockButton from "@/features/createInteractiveModelBlock/ui/CreateInteractiveModelBlock";

import { usePathname, useRouter } from "next/navigation"
import { useState } from "react"
import { UiButton } from "@/shared/Uikit"
import CompleteLessonButton from "@/features/completeLesson/ui/CompleteLessonButton"
import { indexOf } from "lodash"
import SaveLessonButton from "@/features/saveLesson/ui/SaveLessonButton"

type LessonBlockProps = {
    editable: boolean,
    lessonId: number
}

export default function LessonContent(props: LessonBlockProps) {
    const { lesson, isPending, isSuccess, errorMessage, refetch } = useGetLessonById(props.lessonId)
    const [value, setValue] = useState<RawDraftContentState>(convertToRaw(EditorState.createEmpty().getCurrentContent()))

    const testIds: number[] = Object.values(value.entityMap).filter((entity) => {
        return entity.type == 'TestBlock'
    }).map((entity) => {
        return entity.data.id
    })
    console.log(lesson?.content)
    return (
        <>
            {isPending && <UiSpinner className='size-10 fixed' />}
            {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
            {isSuccess && lesson && !errorMessage &&
                <>
                    <h1 className='font-bold text-[20px] text-center'>
                        {lesson.tittle}
                    </h1>
                    <div className='flex flex-col w-full px-24'>
                        <TextEditor
                            customComponents={[
                                {
                                    component: (props: {
                                        blockProps: { id: number }
                                    }) => {

                                        return (
                                            <>
                                                <TestBlock
                                                    testId={props.blockProps.id}
                                                />
                                            </>
                                        )
                                    },
                                    key: 'TestBlock',
                                    button: (insert) => {
                                        return <CreateTestButton
                                            onSuccess={(response) => {
                                                insert({ id: response.id })
                                            }}
                                        />
                                    }
                                },
                                {
                                    component: (props: {
                                        blockProps: { id: number }
                                    }) => {

                                        return (
                                            <>
                                                <ImageBlock
                                                    imageId={props.blockProps.id}
                                                />
                                            </>
                                        )
                                    },
                                    key: 'ImageBlock',
                                    button: (insert) => {
                                        return <CreateImageBlockButton
                                            onSuccess={(response) => {
                                                insert({ id: response.id })
                                            }}
                                        />
                                    }
                                },
                                {
                                    component: (props: {
                                        blockProps: { id: number }
                                    }) => {

                                        return (
                                            <>
                                                <div className='cursor-default'>

                                                    <InteractiveModelBlock
                                                        modelId={props.blockProps.id}
                                                    />
                                                </div>
                                            </>
                                        )
                                    },
                                    key: 'InteractiveModelBlock',
                                    button: (insert) => {
                                        return <CreateInteractiveModelBlockButton
                                            onSuccess={(modelId) => {
                                                insert({ id: modelId })
                                            }}
                                        />
                                    }
                                }
                            ]}
                            setValue={setValue}
                            startValue={lesson.content ? lesson.content : undefined}
                            readonly={!props.editable}
                        />
                        {props.editable && <>
                            <SaveLessonButton
                                lessonId={props.lessonId}
                                content={value}
                                testIds={testIds}
                                onSuccess={() => {
                                    alert('Урок сохранен')
                                }}
                            />
                        </>}
                        {!props.editable && <>
                            <CompleteLessonButton
                                lessonId={props.lessonId}
                                testIds={testIds}
                                onSuccess={() => {
                                    alert('Урок завершен')
                                }}
                                onError={(errorMessage) => {
                                    alert(errorMessage)
                                }}
                            />
                        </>}
                    </div>
                </>
            }
        </>
    )
}

